<template>
  <div>
    <Top :activeIndex=-1></Top>
    <div id="container" style="margin:40px 0 0 250px">
      <div class="clearfix">
        <div class="content_l">
          <dl class="c_collections">
            <dt>
              <h1><em></em>我收藏的职位<span>（共{{pageInfo.total}}个）</span></h1>
            </dt>
            <dd>
              <form id="collectionsForm">
                <ul class="reset my_collections" v-for="item in pageInfo.list" :key="item.position.positionId">
                  <li data-id="133340" >
                    <a  target="_blank" >
                      <img v-if="item.companyImg" :src="$config.url+item.companyImg">
                      <div v-else><img src="../resume/img/default_headpic.png"></div>
                    </a>
                    <div class="co_item" >
                      <h2 title="酒店业务助理" @click="goPositionDetail(item.position.positionId)">
                        <a target="_blank" >
                          <em>{{item.position.positionName}}</em>
                          <span>（{{item.position.minSalary}}K-{{item.position.maxSalary}}K）</span>
                        </a>
                      </h2>
                      <span class="co_time" >发布时间：{{makeDate(item.position.updateTime)}}</span>
                      <div class="co_cate" style="padding-top: 5px">{{item.position.companyName}} /
                        {{item.position.city}} / {{item.position.workExp}} / {{item.position.eduRequirements}}</div>
                      <div style="margin-top: 5px">
                        <span class="co_youhuo c7" >{{item.position.welfare}}</span>
                        <a class="collection_link" target="_blank"
                           @click="setApplicants(item.position.positionId)">投个简历</a>
                        <i></i>
                        <a class="collectionCancel collection_link collected"
                           @click="deleteJobCollection(item.position.positionId)">
                          取消收藏
                        </a>
                      </div>

                    </div>
                  </li>
                </ul>
              </form>
            </dd>
          </dl>
        </div>
        <div class="content_r">
          <div class="mycenterR" id="myInfo">
            <h2>我的信息</h2>
            <a href="collections.html">我收藏的职位</a>
            <br>
            <a target="_blank" href="subscribe.html">我订阅的职位</a>
          </div><!--end #myInfo-->
          <div class="greybg qrcode mt20">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Top from '../header/Header'
  import {makeSimpleDate,makeDate} from "../../common/js/dateformat"
  export default {
    name: "job-collection",
    components: {
      Top
    },
    data(){
      return {
        pageInfo:{},
        userId:'',
        pageIndex:1,
        loading:false,
      }
    },
    created(){
      this.userId=this.$store.state.user.userId;
      this.getJobCollectionByUserId();
    },
    methods:{
      //获取全部收藏记录
      getJobCollectionByUserId(){
        this.loading=true;
        this.$ajax.post(this.$config.url + `jobCollection/selJobCollectionByUserId/${this.pageIndex}`, {
          "userId": this.userId
        }).then(res => {
          this.pageInfo = res.data;
          this.loading = false;
        }).finally(() => {
        })
      },
      //取消收藏
      deleteJobCollection(positionId){
        console.log(positionId);
        this.$ajax.post(this.$config.url + "jobCollection/deleteJobCollection", {
          "userId": this.userId,
          "positionId": positionId
        }).then(res => {
          console.log(res.data.message);
          if (res.data === "succ") {
            this.$message.success("已取消收藏");
            //刷新一下
            this.getJobCollectionByUserId();
          } else {
            this.$message.error("出错了，取消失败")
          }
        })
      },
      //投递简历
      setApplicants(positionId){
        this.$ajax.post(this.$config.url + "applicants/AddApplicant", {
          "positionId": positionId,
          "userId":this.userId,
          "applicationType":0,
        }).then(res => {
          if (res.data=== "succ") {
            this.$message.success({
              showClose: true,
              message: '投递成功！'
            })
          } else if(res.data=== "isExist"){
            this.$message.warning({
              showClose: true,
              message: '已经投递过该岗位！'
            })
          }
          else {
            this.$message.error("出错了，无这个职位信息")
          }
        })
      },
      goPositionDetail(positionId){
        this.$router.push(`/positionDetail/${positionId}`)
      },
      makeSimpleDate(date) {
        return makeSimpleDate(date)
      },
      makeDate(date){
        return makeDate(date)
      },
    },


  }
</script>

<style scoped>
  .c_collections{margin-bottom:40px;position:relative; background-color:#fafafa;}
  .c_collections h1{ float:left; color:#fff; font-size:24px; font-weight:normal; height:43px; background:#91cebe; margin:-8px 0 10px 48px;/*已投递简历状态:40px;old:20px*/ padding:0 20px; line-height:43px; position: absolute; z-index:2;}
  .c_collections h1 em{ background:url(img/title_arrow01.png) no-repeat; width:6px; height:8px; position:absolute; left:-6px; top:0;}
  .c_collections > dd{color:#555; padding:55px 0 20px 0;clear:both;}
  ul.my_collections{margin:15px 48px;}
  ul.my_collections li{padding:7px;margin-bottom:25px;background:#fff;overflow:hidden;}
  ul.my_collections li img{width:67px;height:67px;border:2px solid #ededed;position:absolute;}
  ul.my_collections li .co_item{margin-left:82px;}
  ul.my_collections h2{font-size:18px;color:#0d9572;margin:0 0 3px;float:left;}
  ul.my_collections h2 a{color:#0d9572;}
  ul.my_collections h2 a span{font-size:16px;color:#e6775c;}
  ul.my_collections .co_time{color:#999999;font-size:12px;float:right; }
  ul.my_collections .co_cate{clear:both;color:#555; margin-top: 20px}
  .collection_link{font-size:14px;color:#019875;float:right;margin-left:10px;*margin-top:-22px;}
  .collection_status{font-size:14px;color:#555;float:right;margin-left:10px;*margin-top:-22px;}
  .collectionCancel{position:relative;}
  .collectionCancel span{float:left;width:120px;text-align:center;font:14px 宋体;color:#777;border:2px solid #f2f2f2;text-decoration:none !important;background:#fff;padding:3px;position:absolute;right:-40px;top:-28px;display:none}
  ul.my_collections li i{float:right;width:1px;height:24px;margin-left:10px;*margin-top:-22px;}
  em{ font-style:normal;}
  .c7{color:#777;}
  .content_l{ float:left; width:680px;}
  .content_r{ float:left; width:280px; margin-left:64px;}
</style>